<template>
    <BaseParam :label="label" :help="help">
        <el-select
            v-model="selectedModel"
            :placeholder="config?.placeholder || '请选择模型'"
            :loading="loading"
            @change="handleChange"
        >
            <el-option
                v-for="model in models"
                :key="model.value"
                :label="model.label"
                :value="model.value"
            >
                <div class="model-option">
                    <span>{{ model.label }}</span>
                    <span class="model-info">{{ model.info }}</span>
                </div>
            </el-option>
        </el-select>
    </BaseParam>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import BaseParam from './BaseParam.vue';
import type { ParamConfig } from './types';

interface Model {
    label: string;
    value: string;
    info?: string;
}

const props = defineProps<{
    modelValue?: string;
    label: string;
    help?: string;
    config?: {
        placeholder?: string;
        modelType?: string;
    };
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void;
}>();

const selectedModel = ref(props.modelValue || '');
const models = ref<Model[]>([]);
const loading = ref(false);

watch(() => props.modelValue, (newValue) => {
    selectedModel.value = newValue || '';
});

const handleChange = (value: string) => {
    emit('update:modelValue', value);
};

// 加载模型列表
const loadModels = async () => {
    loading.value = true;
    try {
        // TODO: 从API获取模型列表
        models.value = [
            { label: '模型1', value: 'model1', info: 'v1.0' },
            { label: '模型2', value: 'model2', info: 'v2.0' }
        ];
    } catch (error) {
        console.error('Load models error:', error);
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    loadModels();
});
</script>

<style lang="scss" scoped>
.model-option {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .model-info {
        font-size: 12px;
        color: #909399;
    }
}
</style> 